<style type="text/css">
    .viewDivBase {
        padding: 0;
        margin: 0;
        height: 400px;
        width: 49.9%;
        position: relative;
    }
    #viewDiv2d {
        float: left;
    }
    #viewDiv3d {
        float: right;
    }
    .title {
        top: 0;
        right: 0;
        position: absolute;
        z-index: 99;
        background-color: white;
        padding: 5px;
        opacity: 0.75;
    }
    .source-info {
        display: inline-block;
    }
</style>
<h2>Geodesic Buffers</h2>

<div class="web-gl-warning" ng-show="vm.showViewError">WebGL is not supported on your platform/browser.</div>

<esri-map-view class="viewDivBase" id="viewDiv2d"
    map="vm.map"
    view-options="{
        zoom: 2,
        center: [0, 45]
    }">
    <div class="title">MapView</div>
</esri-map-view>

<esri-scene-view class="viewDivBase" id="viewDiv3d"
    map="vm.map"
    view-options="{
        zoom: 3,
        center: [0, 45]
    }"
    on-error="vm.onViewError"
    ng-hide="vm.showViewError">
    <div class="title">SceneView</div>
</esri-scene-view>

<div class="source-info">
    <p>Based on <a href="https://developers.arcgis.com/javascript/latest/sample-code/ge-geodesicbuffer/index.html">this sample</a>.</p>
</div>
